<template>
  <div class="chatIcons">
    <!-- 刷新 -->
    <div class="chatIcon_head">
      <div class="chatIcon_head_left">
        <img src="@/assets/jian@2x.png" alt=""/>
        <span>{{ props.title }}</span>
      </div>
      <div class="chatIcon_head_right">
        <span><el-countdown :value="props.timeVal" @finish="finish"/>后自动更新</span>
        <div class="chatIcon_head_right_btn" @click="getNewList('rem')">
          <img src="@/assets/update@2x.png" alt=""/>
          <span>手动更新</span>
        </div>
      </div>
    </div>

    <!-- 操作 -->
    <div class="chatIcon_operate">
      <div class="layout_content_picture_item_head_sele">
        <span>{{ from.sortName }}</span>
        <img src="@/assets/dwon@2x.png" alt=""/>
        <div class="sele_menu">
          <div class="sele_menu_item" v-for="(item, index) in sort" :key="index" @click="clickSort(item)">{{
              item.name
            }}
          </div>
        </div>
      </div>
      <div class="chatIcon_operate_cate">
        <div :class="item.active ? 'chatIcon_operate_cate_item active' : 'chatIcon_operate_cate_item'"
             @click="clickDate(index, item.id)" v-for="(item, index) in dateType" :key="index">{{ item.name }}
        </div>
      </div>
      <div class="chatIcon_operate_w" @click="openProp">
        <div style="position: relative">
          <img src="@/assets/wdbg.png" alt="" style="width: 48px">
          <div
              style="position: absolute;top: 3px;text-align: center;width: 52px;letter-spacing: 5px;font-size: 13px;font-weight: 900">
            问答
          </div>
        </div>
      </div>
    </div>
    <div class="chatIcon_list">
      <div class="chatIcon_list_item" v-for="(item, index) in from.list" :key="index" style="position: relative">
        <div class="chatIcon_list_item_head">
          <img :src="item.avatar" alt=""/>
          <span class="head_name">{{ item.username }}</span>
            <span class="head_time">{{ item.create_time }}</span>
            <span class="head_time" style="padding-left:10px;" v-if="item.is_author === 1" @click="deletePost(item)">删除</span>
            <span class="head_time" style="padding-left:10px;" v-if="item.is_author === 1" @click="updatePost(item)">修改</span>
        </div>


        <div v-if="item.recommended==1" style="position: absolute;right: 50px;top:0;"><img src="@/assets/refined.png"
                                                                                           alt=""
                                                                                           style="width: 28px;height: 28px">
        </div>
        <div v-if="item.is_top==1" style="position: absolute;right: 20px;top:0;"><img src="@/assets/topping.png" alt=""
                                                                                      style="width: 28px;height: 28px">
        </div>
        <div v-if="item.is_reprint==1" style="position: absolute;right: 20px;top:0;"><img src="@/assets/zhuan.png"
                                                                                          alt=""
                                                                                          style="width: 28px;height: 28px">
        </div>


        <div>
          <div :class="{ 'chatIcon_list_item_info': true, 'textinfo': true }" v-html="item.post_content"
               :ref="el => setPostContentRef(el, index)"></div>
          <div style="width: 100%;text-align: center;margin: 5px;color: #e7d119;font-size: 10px">
            <text @click="expand(index, $event.target)" v-if="expandStates[index]">展开</text>
          </div>
        </div>

        <div style="height: 150px;overflow: hidden;position: relative" v-if="item.file_img_num > 0">
          <div
              style="margin-top: 10px;width: 33%;height: 150px;margin-left: 2px;display: inline-block;float: left;position: relative;"
              v-for="(img, i) in item.file_img" :key="i">
            <img :src="img" alt="" :style="{ width: '100%', height: '150px', opacity: getOpacity(i) }"
                 @click="openPreview(i,item.file_img)">
          </div>
          <img src="@/assets/jia.png" alt="" style="width: 50px;height: 50px;position: absolute;top: 40%;left: 80%;"
               v-if="item.file_img_num >= 3" @click="jumpDetails(item)">

          <div v-if="showPreview" class="modal" @click="closePreview">
            <div class="modal-content">
              <span class="close" @click="closePreview">&times;</span>
              <img :src="images1[currentImageIndex]" alt="Preview" style="max-width: 80%; max-height: 80%;"/>
            </div>
          </div>
        </div>


        <!--        <div class="chatIcon_list_item_pj" @click.stop>-->
        <!--          <div class="chatIcon_list_item_pj_item" v-for="(comment, i) in item.commentList" :key="i">-->
        <!--            &lt;!&ndash; 一级评论回复弹窗 &ndash;&gt;-->
        <!--            <div class="chatIcon_list_item_pj_item_pl" @click.stop v-if="comment.active">-->
        <!--              <div class="item_pl_user">-->
        <!--                <span>@{{ comment.user.username }}</span>-->
        <!--                <span @click.stop="closeComment(comment)">x</span>-->
        <!--              </div>-->
        <!--              <div class="item_pl_content">-->
        <!--                <textarea v-model="comment.text" placeholder="请输入内容"></textarea>-->
        <!--              </div>-->
        <!--              <div class="item_pl_caozuo">-->
        <!--                <el-popover-->
        <!--                    placement="bottom"-->
        <!--                    title="请选择表情"-->
        <!--                    :width="300"-->
        <!--                    @before-enter="beforeIconChild(index, i)"-->
        <!--                    trigger="click">-->
        <!--                  <template #reference>-->
        <!--                    <img src="@/assets/icon.png" alt=""/>-->
        <!--                  </template>-->
        <!--                  <chatIcon @changeText="getIconChild"/>-->
        <!--                </el-popover>-->

        <!--                <imageContent :content="comment.text" :obj="comment" :type="'from.list['+index+'].commentList'"-->
        <!--                              @result="imageContentResult"></imageContent>-->
        <!--                <div class="item_pl_caozuo_btn" @click="sendChildComment(comment, '', comment.id)">发送</div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="chatIcon_list_item_pj_item_top">-->
        <!--              <div class="pj_item_top_user">-->
        <!--                <img :src="comment.user.avatar" alt=""/>-->
        <!--                <span>{{ comment.user.username }}的评论</span>-->
        <!--              </div>-->
        <!--              <div class="pj_item_top_time">-->
        <!--                <div class="pj_item_top_time_a" @click.stop="handleMouseEnter(comment)">-->
        <!--                  <img src="@/assets/pl@2x.png" alt=""/>-->
        <!--                  <span>评论</span>-->
        <!--                </div>-->
        <!--                  <div class="pj_item_top_time_a" v-if="comment.is_author === 1" @click.stop="deleteComment(comment.id)">-->
        <!--                      <span>删除</span>-->
        <!--                  </div>-->
        <!--                <div class="pj_item_top_time_b">{{ comment?.createtime }}</div>-->
        <!--              </div>-->
        <!--            </div>-->

        <!--            <div class="chatIcon_list_item_pj_item_bottom">-->
        <!--              <div v-html="handleMktoHtml(comment.content)" style="font-size: 14px" class="comment-box"-->
        <!--                   @click="handleClick"></div>-->
        <!--              <span></span>-->
        <!--              &lt;!&ndash; <span>跟多</span> &ndash;&gt;-->
        <!--            </div>-->
        <!--            &lt;!&ndash; 子级评论列表 &ndash;&gt;-->
        <!--            <div class="chatIcon_list_item_pj_item_list" v-if="comment.childernComment.length > 0">-->
        <!--              <div class="chatIcon_list_item_pj_item_list_item" v-for="(child, s) in comment.childernComment" :key="s">-->
        <!--                &lt;!&ndash; 二级评论回复弹窗 &ndash;&gt;-->
        <!--                <div class="chatIcon_list_item_pj_item_pl" @click.stop v-if="child.active">-->
        <!--                  <div class="item_pl_user">-->
        <!--                    <span>@{{ child.user.username }}</span>-->
        <!--                    <span @click.stop="closeComment(child)">x</span>-->
        <!--                  </div>-->
        <!--                  <div class="item_pl_content">-->
        <!--                    <textarea v-model="child.text" placeholder="请输入内容"></textarea>-->
        <!--                  </div>-->
        <!--                  <div class="item_pl_caozuo">-->
        <!--                    <el-popover-->
        <!--                        placement="bottom"-->
        <!--                        title="请选择表情"-->
        <!--                        :width="300"-->
        <!--                        @before-enter="beforeIconChild(index, i)"-->
        <!--                        trigger="click">-->
        <!--                      <template #reference>-->
        <!--                        <img src="@/assets/icon.png" alt=""/>-->
        <!--                      </template>-->
        <!--                      <chatIcon @changeText="getIconChild"/>-->
        <!--                    </el-popover>-->
        <!--                    <imageContent :content="child.text" :obj="child"-->
        <!--                                  :type="'from.list['+index+'].commentList['+i+'].childernComment'"-->
        <!--                                  @result="imageContentResult"></imageContent>-->
        <!--                    <div class="item_pl_caozuo_btn" @click="sendChildComment(child, comment, comment.id)">发送</div>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--                <div class="chatIcon_list_item_pj_item_top">-->
        <!--                  <div class="pj_item_top_user">-->
        <!--                    <img :src="child?.user?.avatar" alt=""/>-->
        <!--                    <span>{{ child?.user?.username }}的评论</span>-->
        <!--                  </div>-->
        <!--                  <div class="pj_item_top_time">-->
        <!--                    <div class="pj_item_top_time_a" @click.stop="handleMouseEnter(child)">-->
        <!--                      <img src="@/assets/pl@2x.png" alt=""/>-->
        <!--                      <span>评论</span>-->
        <!--                    </div>-->
        <!--                      <div class="pj_item_top_time_a" v-if="comment.is_author === 1" @click.stop="deleteComment(child.id)">-->
        <!--                          <span>删除</span>-->
        <!--                      </div>-->
        <!--                    <div class="pj_item_top_time_b">{{ child?.createtime }}</div>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--                <div class="chatIcon_list_item_pj_item_bottom">-->
        <!--                  <div v-html="handleMktoHtml(child?.content)" style="font-size: 14px" class="comment-box"></div>-->
        <!--                </div>-->
        <!--                <div class="chatIcon_list_item_pj_more"-->
        <!--                     v-if="comment.isShow && (s == comment.childernComment.length - 1)"-->
        <!--                     @click="getCommentList(child.aid, comment.id, comment.page, index, i, comment, child.top_pid ? child.top_pid : child.id )">-->
        <!--                  展开查看更多 >-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            &lt;!&ndash; 加载更多评论 &ndash;&gt;-->
        <!--            <div class="chatIcon_list_item_pj_more" v-if="comment.childernComment.length == 0 && comment.is_children == 1"-->
        <!--                 @click="getCommentList(comment.aid, comment.id, comment.page, index, i, comment, comment.top_pid ? comment.top_pid : comment.id)">-->
        <!--              展开查看更多 >-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="chatIcon_list_item_footer" @click.stop>
          <div class="chatIcon_list_item_footer_left">
            <!--            <div class="chatIcon_list_item_footer_left_item" @click.stop="Like(item.id, item.is_mylike, item)">-->
            <!--              <img :src="item.is_mylike == 1 ? require('@/assets/dianz.png') : require('@/assets/zz.png')" alt=""/>-->
            <!--              <span>{{ item.post_like }}</span>-->
            <!--            </div>-->
            <div class="chatIcon_list_item_footer_left_item" @click.stop="transport(item)">
              <img src="@/assets/zhuanzai.png" alt=""/>
              <span>转载</span>
            </div>

            <div
                style="position: fixed;top: 40%;width: 630px;left: 50%;transform: translateX(-50%);background-color: #fff;padding: 10px;z-index: 9999"
                @click.stop v-if="item.transports">
              <div class="item_pl_user">
                <span> 转载内容 </span>
                <span style="cursor: pointer" @click.stop="closetransport(item)">X</span>
              </div>
              <textareaComponent :typeView="channels_id" :channel="item.channel_id" :inputtype="inputtype"
                                 :fuid="item.id" @result="sendMessageResult"/>
              <!--                  <div class="chatIcon_list_item_info" v-html="item.post_content"></div>-->
              <textarea class="item_pl_content_textarea" cols="30" rows="10" :value="item.post_content_text"
                        id="myTextarea" @input="handleTextareaInput"></textarea>

            </div>

            <div class="chatIcon_list_item_footer_left_item" @click.stop="collect(item.id, item.is_myfavorite, item)">
              <img :src="item.is_myfavorite == 1 ? require('@/assets/shouc.png') : require('@/assets/sc.png')" alt=""/>
              <span>收藏{{ item.post_favorites }}</span>
            </div>
            <el-popover
                :width="150"
                trigger="hover">
              <template #reference>
                <div class="chatIcon_list_item_footer_left_item">
                  <img src="@/assets/zf.png" alt=""/>
                  <span>转发{{ item.post_forward }}</span>
                </div>
              </template>
              <div style="width: 100%; display: flex; align-items: center;">
                <div @click="shareWeChat"
                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <img style="width: 30px; height: 30px;" src="@/assets/wx.png" alt=""/>
                  <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">微信</span>
                </div>
                <div @click="shareMicroBlog"
                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <img style="width: 30px; height: 30px;" src="@/assets/wb.png" alt=""/>
                  <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">微博</span>
                </div>
                <div @click="shareQQ"
                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <img style="width: 30px; height: 30px;" src="@/assets/QQ@2x.png" alt=""/>
                  <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">QQ</span>
                </div>
              </div>
            </el-popover>
            <div class="chatIcon_list_item_footer_left_item" @click="jumpDetails(item)">
              <img src="@/assets/pl.png" alt=""/>
              <span>评论{{ item.comment_count }}</span>
            </div>
          </div>
          <!--          <div class="chatIcon_list_item_footer_right">-->
          <!--            <div class="inputText">-->
          <!--              <input type="text" v-model="item.text" placeholder="分享你的评论"/>-->
          <!--            </div>-->
          <!--            <div class="caozuo">-->
          <!--                <el-popover-->
          <!--                        placement="bottom"-->
          <!--                        title="请选择表情"-->
          <!--                        :width="300"-->
          <!--                        trigger="click">-->
          <!--                    <template #reference>-->
          <!--                        <div class="textarea_bottom_left_item">-->
          <!--                            <img src="@/assets/icon.png" alt=""/>-->
          <!--                            <span></span>-->
          <!--                        </div>-->
          <!--                    </template>-->
          <!--                    <chatIcon @changeText="getIcon"/>-->
          <!--                </el-popover>-->
          <!--              <imageContent :content="item.text" :obj="item" type="from.list"-->
          <!--                            @result="imageContentResult"></imageContent>-->

          <!--              <div class="caozuo_btn" @click="sendCommentVal(item.id, item.text, item)">发送</div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <div class="chatIcon_list_item_pj_item_pl" @click.stop>
<!--          <div class="item_pl_user" v-if="props.typeInput === 19">-->
<!--            <span v-if="props.typeInput === 19"> 回答 </span>-->
<!--            <span v-else> 欢迎评论 </span>-->
<!--            &lt;!&ndash;                  <span @click.stop="closeframe(item)">x</span>&ndash;&gt;-->
<!--          </div>-->
          <div class="item_pl_content">
            <textarea class="item_pl_content_textarea pltextarea" style="border-radius:30px;height: 33px;margin-top: 20px;padding: 10px;" v-model="item.text" rows="1" placeholder="请输入内容11111" @input="adjustTextareaHeight(item.id)" :id="'aaaaaa'+item.id"></textarea>
          </div>
          <div class="item_pl_caozuo">
            <el-popover
                placement="bottom"
                title="请选择表情"
                :width="300"
                @before-enter="beforeIconChild(index, i)"
                trigger="click">
              <template #reference>
                <img class="item_pl_caozuo_img" src="@/assets/icon.png" alt=""/>
              </template>
              <chatIcon @changeText="getIcon"/>
            </el-popover>
            <imageContent :content="item.text" :obj="item" :type="'from.list['+index+'].commentList'"
                          @result="imageContentResult1"></imageContent>
            <div class="item_pl_caozuo_btn" @click="sendCommentVal(item.id,item.text,item)">发送</div>
          </div>
        </div>
      </div>
    </div>





    <div v-if="searchtype === 2">
      <div style="color:#fff;font-size:22px;text-align: center;padding:5px;">搜索结果</div>

        <div v-if="albumtype === 1" class="aaa" style="cursor: pointer;width: 95%;height: 260px;background-color: #023C67;display: inline-block;margin: 5px 2%;border-radius: 10px;" v-for="(item, index) in albumList" :key="index" @click="albumvideo(item)">
            <img class="image" style="width: 95%;height: 210px;margin-left: 2.5%;margin-top: 5px;border-radius: 10px;"
                 :src="item.cover_image" alt=""/>
            <div style="display: flex;align-items: center;padding-left: 15px;padding-top: 10px;">
                <img class="play" style="width: 20px;height: 20px;" src="@/assets/sharpicons_present.png" alt=""/>
                <span style="padding-left: 10px;">{{ item.name }}</span>
            </div>
        </div>
        <div id="bbb"  v-else>
            <div style="width: 98%;height: 320px;background-color: #023C67;display: inline-block;margin: 5px 2%;border-radius: 10px;">
                <img id="image_mse" class="image" style="width: 95%;height: 253px;margin-left: 2.5%;margin-top: 10px;border-radius: 10px;" :src="introducedata.cover_image" alt="" />
                <div id="mse_video"></div>
                <div style="display: flex;align-items: center;padding-left: 15px;padding-top: 10px;">
                    <img class="play" style="width: 20px;height: 20px;" src="@/assets/sharpicons_present.png" alt="" />
                    <text style="padding-left: 10px;width: 150px;">{{ introducedata.name }}</text>
                    <div style="width: 65px;height: 30px;background-color: #1573CC;border-radius: 5px;display: flex;align-items: center;line-height: 30px;cursor: pointer;margin-left: 18%;" @click="del_collection(introducedata.id)" v-if="is_collection===1">
                        <img class="play" style="width: 15px;height: 15px;margin-left: 8px;" src="@/assets/zsstar.png" alt="" />
                        <text style="padding-left: 5px;"> 收藏 </text>
                    </div>
                    <div style="width: 65px;height: 30px;background-color: #1573CC;border-radius: 5px;display: flex;align-items: center;line-height: 30px;cursor: pointer;margin-left: 18%;" @click="album_collection(introducedata.id)" v-else>
                        <img class="play" style="width: 15px;height: 15px;margin-left: 8px;" src="@/assets/star.png" alt="" />
                        <text style="padding-left: 5px;"> 收藏 </text>
                    </div>
                    <div style="width: 2px;height: 20px;background-color: #628FB1;margin-left: 15px;"></div>
                    <div style="width: 65px;height: 30px;display: flex;align-items: center;line-height: 30px;cursor: pointer;margin-left: 7px;">
                        <el-popover
                                :width="150"
                                trigger="hover">
                            <template #reference>
                                <div class="chatIcon_list_item_footer_left_item">
                                    <img class="play" style="width: 15px;height: 15px;margin-left: 8px;" src="@/assets/share.png" alt="" />
                                    <span>分享</span>
                                </div>
                            </template>
                            <div @click="shareWeChat" style="width: 100%; display: flex; align-items: center;">
                                <div style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                                    <img style="width: 30px; height: 30px;" src="@/assets/wx.png" alt=""/>
                                    <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">微信</span>
                                </div>
                                <div @click="shareMicroBlog"
                                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                                    <img style="width: 30px; height: 30px;" src="@/assets/wb.png" alt=""/>
                                    <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">微博</span>
                                </div>
                                <div @click="shareQQ"
                                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                                    <img style="width: 30px; height: 30px;" src="@/assets/QQ@2x.png" alt=""/>
                                    <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">QQ</span>
                                </div>
                            </div>
                        </el-popover>
                    </div>
                </div>
            </div>
            <div style="width: 80%;height: 50px;margin: 5px 2%;display: flex;justify-content:space-between;">
                <div id="jieshao" style="width: 80px;height: 30px;background-color: #0D67BB;border-radius: 5px;text-align: center;line-height:30px;cursor: pointer" @click="introduce">
                    <text> 课程介绍 </text>
                </div>
                <div id="mulu" style="width: 80px;height: 30px;background-color: #0B3D6C;border-radius: 5px;text-align: center;line-height:30px;cursor: pointer" @click="directory">
                    <text> 课程目录 </text>
                </div>
                <div id="pinglun" style="width: 80px;height: 30px;background-color: #0B3D6C;border-radius: 5px;text-align: center;line-height:30px;cursor: pointer" @click="comment1">
                    <text> 用户评论({{commentnum}}) </text>
                </div>
            </div>
            <div id="introduce" style="width: 98%;margin: 5px 2%;background-color: #0D2E64;border-radius: 10px;">
                <div style="width: 90%;height: 50px;margin: auto;text-align: center;line-height:50px;display: flex;justify-content: space-between;border-bottom: 2px #1E4173 solid">
                    <text style="padding: 5px 0 15px;color:#00D5D8;font-weight: bold;font-size: 18px;"> 课程平均评分 </text>
                    <div>
                        <el-rate disabled v-model="introducedata.average_score" size="large"></el-rate>
                        <text style="padding: 5px 0 15px;color:#FFD100;font-weight: bold;font-size: 21px;"> {{ introducedata.average_score }} 分</text>
                    </div>
                </div>
                <div style="width: 90%;margin: auto;border-bottom: 2px #1E4173 solid;margin-top: 15px;">
                    <text style="padding: 5px 0 15px;color:#00D5D8;font-weight: bold;"> 课程介绍 </text>
                    <div style="padding: 5px 0 15px;font-weight: bold;">
                        <div class="html-box" v-html="introducedata.introduction"></div>
                    </div>
                </div>
                <div style="width: 90%;margin: auto;margin-top: 15px;">
                    <text style="padding: 5px 0 15px;color:#00D5D8;font-weight: bold;"> 讲师介绍 </text>
                    <div style="padding: 5px 0 15px;font-weight: bold;">
                        <div class="html-box" v-html="introducedata.lecturer_introduction"></div>
                    </div>
                </div>
            </div>
            <div id="directory" style="width: 98%;display: none;">
                <div style="width: 100%;height: 40px;background-color: #082352;border-radius: 8px;display: flex;padding: 5px;margin-top: 5px;justify-content: space-between;cursor: pointer;" v-for="(item, index) in directorydata" :key="index">
                    <div style="display: flex;justify-content:space-between;align-items: center;" @click="video_info(item.video_path_obs)">
                        <img class="play" style="width: 15px;height: 15px;margin-left: 8px;" src="@/assets/play2.png" alt="" />
                        <text style="padding-left: 5px;"> {{ item.title }} </text>
                    </div>
                    <div style="width: 65px;height: 30px;display: flex;align-items: center;line-height: 30px;cursor: pointer;margin-top: 8px"  @click="handleMouseEnter_video(item.id)">
                        <img class="play" style="width: 15px;height: 15px;margin-left: 8px;" src="@/assets/evaluate.png" alt="" />
                        <text style="padding-left: 5px;"> 评价 </text>
                    </div>
                </div>
                <div style="margin-top: 60px;margin-bottom: 30px;display: flex;justify-content: center; align-items: center;">
                    <el-pagination
                            small
                            background
                            layout="prev, pager, next"
                            :total="videowhichpage"
                            class="mt-4"
                            @currentChange="testfun1"
                    />
                </div>
            </div>
            <div id="comment" style="width: 98%;margin: 5px 2%;border-radius: 10px;display: none;">
                <div style="margin-top: 5px;background-color: #0D2E64;border-radius: 5px;" v-for="(item, index) in commentdata" :key="index">
                    <div style="width: 90%;height: 20px;padding: 5px;margin-top: 5px;display: flex;align-items: center;justify-content: space-between;">
                        <div style="line-height: 20px;display: flex;align-items: center;">
                            <img class="play" style="width: 20px;height: 20px;border-radius: 100px;margin-left: 8px;" :src="item.user.avatar" alt="" />
                            <text style="padding-left: 5px;"> {{ item.user.username }} </text>
                            <text style="padding-left: 5px;"> {{ item.createtime }} </text>
                        </div>
                    </div>
                    <div style="width: 100%;height: 25px;padding-left: 15px;margin-top: 5px;line-height: 25px;">
                        <span v-html="item.content"></span>
                    </div>
                </div>
                <div class="chatIcon_list_item_pj_item_pl" style="position: relative;top:10px;" @click.stop>
<!--                    <div class="item_pl_user">-->
<!--                        <span> 欢迎评论 </span>-->
<!--                    </div>-->
                    <div class="item_pl_content">
<!--                        <textarea class="item_pl_content_textarea" v-model="comment" placeholder="请输入内容"></textarea>-->
                        <textarea class="item_pl_content_textarea pltextarea" style="border: #f8991e 2px solid;border-radius:10px;height: 32px;margin-top: 5px;padding-left: 6px;" v-model="comment" rows="1" placeholder="请输入内容" @input="adjustTextareaHeight1()" id="aaaaaa"></textarea>

                    </div>
                    <div class="item_pl_caozuo">
                        <el-popover
                                placement="bottom"
                                title="请选择表情"
                                :width="300"
                                @before-enter="beforeIconChild(index, i)"
                                trigger="click">
                            <template #reference>
                                <img class="item_pl_caozuo_img" src="@/assets/icon.png" alt=""/>
                            </template>
                            <chatIcon @changeText="getIcon1"/>
                        </el-popover>
<!--                        <imageContent :content="comment" @result="imageContentResult1"></imageContent>-->
                        <div class="item_pl_caozuo_btn" @click="sendCommentVal1(introducedata.id,comment)">发送</div>
                    </div>
                </div>
                <div style="margin-top: 60px;margin-bottom: 30px;display: flex;justify-content: center; align-items: center;">
                    <el-pagination
                            small
                            background
                            layout="prev, pager, next"
                            :total="commentnum"
                            class="mt-4"
                            @currentChange="testfun"
                    />
                </div>
            </div>


        </div>

        <div class="aaa"
             style="width: 95%;height: 260px;cursor: pointer;background-color: #023C67;display: inline-block;margin: 5px 2%;border-radius: 10px;"
             v-for="(item, index) in liveList" :key="index" @click="zhibo(item.live_url,item.is_member_expire,item)" v-if="zhibotype === 1">
            <img class="image" style="width: 98%;height: 210px;margin-left: 2.5%;margin-top: 5px;border-radius: 10px;"
                 :src="item.image" alt=""/>
            <div style="display: flex;align-items: center;padding-left: 15px;padding-top: 10px;">
                <img class="play" style="width: 20px;height: 20px;" src="@/assets/sharpicons_present.png" alt=""/>
                <span style="padding-left: 10px;">{{ item.title }}</span>
            </div>
        </div>

        <div class="aaa" style="cursor: pointer;width: 95%;height: 260px;background-color: #023C67;display: inline-block;margin: 5px 2%;border-radius: 10px;text-align: center;" v-else>
          <div id="mse"></div>
            <text @click="playlive" v-if="zhibotype === 2" style="line-height: 260px;">点击播放</text>
        </div>

      <div class="chatIcon_list_item" v-for="(item, index) in plateList" :key="index" style="position: relative">
        <div class="chatIcon_list_item_head">
          <img :src="item.avatar" alt=""/>
          <span class="head_name">{{ item.username }}</span>
          <span class="head_time">{{ item.create_time }}</span>
            <span class="head_time" style="padding-left:10px;" v-if="item.is_author === 1" @click="deletePost(item)">删除</span>
            <span class="head_time" style="padding-left:10px;" v-if="item.is_author === 1" @click="updatePost(item)">修改</span>
        </div>
        <div v-if="item.recommended==1" style="position: absolute;right: 50px;top:0;"><img src="@/assets/refined.png"
                                                                                           alt=""
                                                                                           style="width: 28px;height: 28px">
        </div>
        <div v-if="item.is_top==1" style="position: absolute;right: 20px;top:0;"><img src="@/assets/topping.png" alt=""
                                                                                      style="width: 28px;height: 28px">
        </div>
        <div v-if="item.is_reprint==1" style="position: absolute;right: 20px;top:0;"><img src="@/assets/zhuan.png"
                                                                                          alt=""
                                                                                          style="width: 28px;height: 28px">
        </div>

        <!--            <div class="chatIcon_list_item_info" v-html="item.post_content"></div>-->


        <div>
          <div :class="{ 'chatIcon_list_item_info': true, 'textinfo': true }" v-html="item.post_content"
               :ref="setPostContentRef"></div>
          <div style="width: 100%;text-align: center">
            <text @click="expand(index, $event.target)" v-if="expandStates[index]">展开</text>
          </div>
        </div>

        <div style="height: 150px;overflow: hidden;position: relative;" v-if="item.file_img_num > 0">
          <div
              style="margin-top: 10px;width: 33%;height: 150px;margin-left: 2px;display: inline-block;float: left;position: relative;"
              v-for="(img, i) in item.file_img" :key="i">
            <img :src="img" alt="" :style="{ width: '100%', height: '150px', opacity: getOpacity(i) }"
                 @click="openPreview(i,item.file_img)">
          </div>
          <img src="@/assets/jia.png" alt="" style="width: 50px;height: 52px;position: absolute;top: 42%;left: 80%;"
               v-if="item.file_img_num >= 3" @click="jumpDetails(item)">

          <div v-if="showPreview" class="modal" @click="closePreview">
            <div class="modal-content">
              <span class="close" @click="closePreview">&times;</span>
              <img :src="images1[currentImageIndex]" alt="Preview" style="max-width: 80%; max-height: 80%;"/>
            </div>
          </div>
        </div>


        <div class="chatIcon_list_item_pj" @click.stop>
        </div>
        <div class="chatIcon_list_item_footer" @click.stop>
          <div class="chatIcon_list_item_footer_left">
            <!--            <div class="chatIcon_list_item_footer_left_item" @click.stop="Like(item.id, item.is_mylike, item)">-->
            <!--              <img :src="item.is_mylike == 1 ? require('@/assets/dianz.png') : require('@/assets/zz.png')" alt=""/>-->
            <!--              <span>{{ item.post_like }}</span>-->
            <!--            </div>-->
            <div class="chatIcon_list_item_footer_left_item" @click.stop="transport(item)">
              <img src="@/assets/zhuanzai.png" alt=""/>
              <span>转载</span>
            </div>

            <div
                style="position: fixed;top: 40%;width: 630px;left: 50%;transform: translateX(-50%);background-color: #fff;padding: 10px;z-index: 9999"
                @click.stop v-if="item.transports">
              <div class="item_pl_user">
                <span> 转载内容 </span>
                <span style="cursor: pointer" @click.stop="closetransport(item)">X</span>
              </div>
              <textareaComponent :typeView="channels_id" :channel="item.channel_id" :inputtype="inputtype"
                                 :fuid="item.id" @result="sendMessageResult"/>
              <!--                  <div class="chatIcon_list_item_info" v-html="item.post_content"></div>-->
              <textarea class="item_pl_content_textarea" cols="30" rows="10" :value="item.post_content_text"
                        id="myTextarea" @input="handleTextareaInput"></textarea>

            </div>

            <div class="chatIcon_list_item_footer_left_item" @click.stop="collect(item.id, item.is_myfavorite, item)">
              <img :src="item.is_myfavorite == 1 ? require('@/assets/shouc.png') : require('@/assets/sc.png')" alt=""/>
              <span>收藏{{ item.post_favorites }}</span>
            </div>
            <el-popover
                :width="150"
                trigger="hover">
              <template #reference>
                <div class="chatIcon_list_item_footer_left_item">
                  <img src="@/assets/zf.png" alt=""/>
                  <span>转发{{ item.post_forward }}</span>
                </div>
              </template>
              <div style="width: 100%; display: flex; align-items: center;">
                <div @click="shareWeChat"
                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <img style="width: 30px; height: 30px;" src="@/assets/wx.png" alt=""/>
                  <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">微信</span>
                </div>
                <div @click="shareMicroBlog"
                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <img style="width: 30px; height: 30px;" src="@/assets/wb.png" alt=""/>
                  <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">微博</span>
                </div>
                <div @click="shareQQ"
                     style="cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <img style="width: 30px; height: 30px;" src="@/assets/QQ@2x.png" alt=""/>
                  <span style="margin-top: 2px; font-size: 13px; color: #666; font-weight: 400;">QQ</span>
                </div>
              </div>
            </el-popover>
            <div class="chatIcon_list_item_footer_left_item" @click="inputframe(item)">
              <img src="@/assets/pl.png" alt=""/>
              <span>评论{{ item.comment_count }}</span>
            </div>
          </div>
          <!--          <div class="chatIcon_list_item_footer_right">-->
          <!--            <div class="inputText">-->
          <!--              <input type="text" v-model="item.text" placeholder="分享你的评论"/>-->
          <!--            </div>-->
          <!--            <div class="caozuo">-->
          <!--                <el-popover-->
          <!--                        placement="bottom"-->
          <!--                        title="请选择表情"-->
          <!--                        :width="300"-->
          <!--                        trigger="click">-->
          <!--                    <template #reference>-->
          <!--                        <div class="textarea_bottom_left_item">-->
          <!--                            <img src="@/assets/icon.png" alt=""/>-->
          <!--                            <span></span>-->
          <!--                        </div>-->
          <!--                    </template>-->
          <!--                    <chatIcon @changeText="getIcon"/>-->
          <!--                </el-popover>-->
          <!--              <imageContent :content="item.text" :obj="item" type="from.list"-->
          <!--                            @result="imageContentResult"></imageContent>-->

          <!--              <div class="caozuo_btn" @click="sendCommentVal(item.id, item.text, item)">发送</div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <div class="chatIcon_list_item_pj_item_pl" @click.stop v-if="item.inputframes">
          <div class="item_pl_user">
            <span> 发布评论 </span>
            <span @click.stop="closeframe(item)">x</span>
          </div>
          <div class="item_pl_content">
<!--            <textarea class="item_pl_content_textarea" v-model="item.text" placeholder="请输入内容"></textarea>-->
              <textarea class="item_pl_content_textarea" style="border: #f8991e 2px solid;border-radius:10px;height: 32px;margin-top: 5px;padding-left: 6px;" v-model="item.text" rows="1" placeholder="请输入内容" @input="adjustTextareaHeight(item.id)" :id="'aaaaaa'+item.id"></textarea>

          </div>
          <div class="item_pl_caozuo">
            <el-popover
                placement="bottom"
                title="请选择表情"
                :width="300"
                @before-enter="beforeIconChild(index, i)"
                trigger="click">
              <template #reference>
                <img class="item_pl_caozuo_img" src="@/assets/icon.png" alt=""/>
              </template>
              <chatIcon @changeText="getIcon"/>
            </el-popover>
            <imageContent :content="item.text" :obj="item" :type="'from.list['+index+'].commentList'"
                          @result="imageContentResult1"></imageContent>
            <div class="item_pl_caozuo_btn" @click="sendCommentVal(item.id,item.text,item)">发送</div>
          </div>
        </div>
      </div>





      <div style="width: 96%;background-color: #0D2E64;border-radius: 10px;margin-bottom: 10px;padding: 10px;"
           v-for="(item, index) in investmentList" :key="index">
        <div style="padding-bottom: 10px;">发布时间:{{ item.content_time }}</div>
        政策面:<span v-html="item.policy_content"></span>
        市场新闻:<span v-html="item.news_content"></span>
        宏观面:<span v-html="item.macro_content"></span>
        资金面及预期:<span v-html="item.fund_content"></span>
        市场预期/关注:<span v-html="item.expect_content"></span>
        情绪面:<span v-html="item.emotion_content"></span>
      </div>

    </div>

    <Loading v-if="loading"/>
    <notFind v-if="!loading && from.list.length === 0"/>
    <div class="info" v-if="!loading && from.list.length > 0 && noMore">
      <el-text class="mx-1" type="info">没有更多了~</el-text>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible3" title="开通会员" width="650">
    <div style="height: 200px;display: flex;z-index: 10" v-if="paytype==1">
      <div style="width: 20%;height: 200px;border: 2px #0B3D6C solid;background-color: #d3dce6;margin-left: 10px;"
           v-for="(item, index) in vipinfo" :key="index">
        <div style="font-size: 22px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;">{{
            item.name
          }}
        </div>
<!--        <div style="font-size: 18px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;">-->
<!--          <text style="color: red;font-size: 22px">{{ item.membership_price }}</text>￥-->
<!--        </div>-->
          <div style="font-size: 18px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;" v-if="pay_status === 1"><text style="color: red;font-size: 22px">{{ item.membership_price }}</text>￥</div>
          <div style="font-size: 18px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;" v-else><text style="color: red;font-size: 22px">{{ item.membership_score }}</text></div>
        <div style="text-align: center;padding-top: 15px">
<!--          <el-button type="primary" @click="dredge(item.id)">开通</el-button>-->
            <el-button type="primary" v-if="pay_status === 1" @click="dredge(item.id)">开通</el-button>
            <el-button type="primary" v-else @click="dredge1(item.id)">积分开通</el-button>
        </div>
      </div>
    </div>
    <div style="height: 200px;text-align: center;display: flex" v-else>
      <img :src="payimg" style="width: 200px;height: 200px" alt=""/>
    </div>

    <template #footer>
      <span class="dialog-footer" style="margin-right: 10px;">
        <el-button @click="cancellation()">取消</el-button>
      </span>
    </template>
  </el-dialog>

    <el-dialog v-model="dialogFormVisible4" title="开通会员" width="500">
        <el-button @click="payment">付费</el-button>
        <el-button @click="exchange">积分兑换</el-button>
        <el-button @click="apply_for">审核申请</el-button>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible4 = false">取消</el-button>
      </span>
        </template>
    </el-dialog>

  <el-dialog v-model="dialogFormVisible1" title="开通会员" width="500">
    <div>暂未开通会员,开通会员观看!</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="confirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible2" title="评价" width="300">
    <div style="display: flex;justify-content: center; align-items: center;">
      <el-rate size="large" @change="comment_star"/>
    </div>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible" title="">
    <textareaComponent :typeView="channels_id" :channel="channels_id" :inputtype="3" @result="getNewList('rem')"/>
  </el-dialog>

<!--  <vue-easy-lightbox-->
<!--      :visible="visible"-->
<!--      :imgs="images"-->
<!--      :index="0"-->
<!--      @hide="handleHide"-->
<!--  ></vue-easy-lightbox>-->
</template>

<script setup>
import chatIcon from '@/components/chatIcon.vue'
import imageContent from '@/components/imageContent.vue'
import {defineEmits, defineExpose, defineProps, onMounted, onUnmounted, reactive, ref, watchEffect, nextTick} from 'vue'
import {
    addComment,
    addFavorite,
    addLive,
    delFavorite,
    delLive,
    getComment, getHomeList,
    plaza_post_index,
    searchList,
    systemConfig,
    delComment, addRating, getVipList, getAlbumVideoList, createVip, payVip, Vipquery, delPost, scorePay, goodsShow
} from '@/api/index'
import Loading from '@/components/Loading.vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {toBase64} from '@/utils/utils'
import textareaComponent from '@/components/textareaComponent.vue'
import {marked} from 'marked';
import {ElMessage} from "element-plus";
import Player from "xgplayer";

let channels_id = ref('')
const store = useStore()
const router = useRouter()
const props = defineProps({
  title: String,  // 栏目标题
  channel: Number,     // 栏目id
  timeVal: Number,   // 刷新时间
  create_time: String,     // 创建时间
  typeView: String | Number,    // 1 首页广场   5 新闻资讯    3 债市论坛
  typeInput: String | Number    // 19 问答社区
})
const emit = defineEmits(['finish','openPreview','updateContent'])

let sort = ref([
  {name: '默认排序', id: 'desc'},
  {name: '降序', id: 'desc'},
  {name: '升序', id: 'asc'}
])
let dateType = ref([
  {name: '今日', id: 1, active: true},
  {name: '七日', id: 2, active: false},
  {name: '月', id: 3, active: false},
  {name: '年', id: 4, active: false}
])
let loading = ref(true)
let visible = ref(false)
let paytype = ref(1)
let comment = ref('')
const postContents = ref([]); // 存储 DOM 引用的数组
let showTexttype = ref(1)
let images = ref([])
let investmentList = ref([])
let albumList = ref([])
let liveList = ref([])
let plateList = ref([])
let vipinfo = ref([])
let videoList = ref([])
let inputtype = ref(4)
let searchtype = ref(1)
let player = ref({});
let zhibotype = ref(1);
let zhibourl = ref('');
let albumtype = ref(1);
let is_collection = ref(1);
let introducedata = ref([]);
let directorydata = ref([]);
let videowhichpage = ref(1);
let videopage = ref(1);

let images1 = ref([])
let showPreview = ref(false)
let currentImageIndex = ref(0)

let from = reactive({
  page: 1,
  total: 0,
  keyword: '',
  sortName: '降序',
  sortId: 'desc',
  dateType: 1,
  index: 0,
  indexChild: 0,
  list: []
})
let noMore = ref(false)
let dialogFormVisible = ref(false)
let dialogFormVisible1 = ref(false)
let dialogFormVisible2 = ref(false)
let video_id = ref(1)
let commentdata = ref([])
let commentnum = ref([])
let whichpage = ref([])
let dialogFormVisible3 = ref(false)
let dialogFormVisible4 = ref(false)
let pay_status = ref(0)
let pay_al_type = ref(0)
let pay_alid = ref(0)
let order_exchange = ref(0)
let goods_type = ref('')
let table_name = ref('')
let tan_type = ref(1)
const expandStates = reactive(new Array(from.list.length).fill(false));
// 倒计时结束
const finish = () => {
  getNewList('rem')
  emit('finish')
}

const adjustTextareaHeight = (id) => {
    // 动态调整textarea高度的方法，可以根据实际需求进行调整
    // 例如，可以根据内容的行数来动态设置高度
    const textarea = document.getElementById('aaaaaa'+id)
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
}
const adjustTextareaHeight1 = (id) => {
    // 动态调整textarea高度的方法，可以根据实际需求进行调整
    // 例如，可以根据内容的行数来动态设置高度
    const textarea = document.getElementById('aaaaaa')
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
}

const dredge = (id) => {
  createVip({
    goods_type: 'user_group',
    table_name: 'user_group',
    goods_id: id,
  }).then(res => {
    if (res.code === 1) {
      payVip({order_id: res.data.order_id}).then(res1 => {
        if (res1.code === 1) {
          payimg.value = res1.data.code_url
          paytype.value = 2
          const intervalId = setInterval(() => {
            Vipquery({order_id: res.data.order_id}).then(res2 => {
              if (res2.code === 1) {
                if (res2.data.pay_status === 1) {
                  clearInterval(intervalId); // 停止轮询
                  location.reload();
                }
              }
            });
          }, 2000);
        }
      })
    }

  })
}
const payment = (val) => {
    pay_status.value = 1
    dialogFormVisible4.value = false
    dialogFormVisible1.value = true
}

const confirm = (val) => {
    dialogFormVisible3.value = true
    dialogFormVisible1.value = false
    if(pay_status.value === 1){
        getVipList().then(res => {
            if (res.code === 1) {
                vipinfo.value = res.data
            }
        })
    }
}

const apply_for = () => {
    if(tan_type.value === 2){
        goods_type.value = 'album';
        table_name.value = 'album';
    }else{
        goods_type.value = 'articles';
        table_name.value = 'live';
    }
    if(pay_al_type.value === 2){
        createVip({
            goods_type:goods_type.value,
            table_name:table_name.value,
            goods_id:pay_alid.value,
            pay_type:3,
        }).then(res => {
            if (res.code === 1){
                ElMessage({message: '提交成功,等待审核', type: 'success'})
                dialogFormVisible4.value = false
            }
        })
    }else{
        createVip({
            goods_type:goods_type.value,
            table_name:table_name.value,
            goods_id:props.channel,
            pay_type:3,
        }).then(res => {
            if (res.code === 1){
                ElMessage({message: '提交成功,等待审核', type: 'success'})
                dialogFormVisible4.value = false
            }
        })
    }
}
const exchange = (val) => {
    pay_status.value = 2
    dialogFormVisible4.value = false
    dialogFormVisible1.value = true
    if(tan_type.value === 2){
        goods_type.value = 'album';
        table_name.value = 'album';
    }else{
        goods_type.value = 'articles';
        table_name.value = 'live';
    }
    if(pay_al_type.value === 2){
        goodsShow({
            goods_type:goods_type.value,
            table_name:table_name.value,
            goods_id: pay_alid.value,
        }).then(res => {
            if (res.code === 1) {
                vipinfo.value = res.data
            }
        })
    }else{
        goodsShow({
            goods_type:goods_type.value,
            table_name:table_name.value,
            goods_id: props.channel,
        }).then(res => {
            if (res.code === 1) {
                vipinfo.value = res.data
            }
        })
    }
}

const dredge1 = (id) => {
    //差一个积分支付的接口
    let aaaaa = '';
    if(tan_type.value === 2){
        goods_type.value = 'album';
        table_name.value = 'album';
    }else{
        goods_type.value = 'articles';
        table_name.value = 'live';
    }
    pay_status.value = 2
    if(pay_al_type.value === 2){
        createVip({
            goods_type:goods_type.value,
            table_name:table_name.value,
            goods_id:pay_alid.value,
            pay_type:2,
        }).then(res => {
            if (res.code === 1){
                order_exchange.value = res.data.order_id
                dialogFormVisible4.value = false
                dialogFormVisible3.value = true
                scorePay({order_id:order_exchange.value}).then(res1=>{
                    if (res1.code === 1){
                        ElMessage({message: res1.msg, type: 'success'})
                    }
                })
            }
        })
    }else{
        createVip({
            goods_type:goods_type.value,
            table_name:table_name.value,
            goods_id:props.channel,
            pay_type:2,
        }).then(res => {
            if (res.code === 1){
                order_exchange.value = res.data.order_id
                dialogFormVisible4.value = false
                dialogFormVisible3.value = true
                scorePay({order_id:order_exchange.value}).then(res1=>{
                    if (res1.code === 1){
                        ElMessage({message: res1.msg, type: 'success'})
                    }
                })
            }
        })
    }
}

const comment_star = (e) => {
  addRating({
    table_name: 'video',
    object_id: video_id.value,
    score: e
  }).then(res => {
    if (res.code === 1) {
      getComment({
        aid: introducedata.value.id,
        type: 'album',
        limit: 10,
        page: 1
      }).then(res => {
        if (res.code === 1) {
          commentdata.value = res.data.list
          commentnum.value = res.data.total
          whichpage.value = res.data.current_page
        }
      })
      dialogFormVisible2.value = false
      fun_getAlbumVideoList(introducedata.value.id, 1, 10)
    }
  })
}
const fun_getAlbumVideoList = (aaa, bbb, ccc) => {
  getAlbumVideoList({
    album_id: aaa,
    page: bbb,
    limit: ccc,
  }).then(res => {
    if (res.code === 1) {
      is_collection.value = res.data.album.is_favorite
      introducedata.value = res.data.album
      directorydata.value = res.data.video_list
      videowhichpage.value = res.data.total
      videopage.value = res.data.current_page
    }
  })

    getComment({
        aid: aaa,
        type: 'album',
        pid: 0,
        top_pid: 0,
        limit: ccc,
        page: bbb,
        orderway: 'desc'
    }).then(res => {
        if(res.code === 1){
            commentdata.value = res.data.list
            commentnum.value = res.data.total
            whichpage.value = res.data.current_page
        }
    })
}
const cancellation = () => {
  dialogFormVisible3.value = false
  paytype.value = 1
}

const openPreview = (index, ima) => {
  emit('openPreview',{index, ima})
}

const closePreview = (index) => {
  showPreview.value = false;
}

const zhibo = (url, shou,item) => {
  if (shou !== 1) {
      zhibourl.value = url
      zhibotype.value = 2
    // player.value = new Player({
    //   id: 'mse',
    //   autoplay: true,
    //   fluid: true,
    //   url: url,
    // })
  } else {
    dialogFormVisible4.value = true
      tan_type.value = 1
      pay_alid.value = item.id
      pay_al_type.value = 2
  }
}

const playlive = () => {
    if(zhibourl.value !== ''){
        player.value = new Player({
            id: 'mse',
            autoplay: true,
            fluid: true,
            url: zhibourl.value,
        })
        zhibotype.value = 3
    }else{
        ElMessage({message: '暂未开播', type: 'error'})
    }
}

const albumvideo = (item) => {
    if (item.is_member_expire !== 1) {
        albumtype.value = 2
        fun_getAlbumVideoList(item.id,1,10)
    } else {
        dialogFormVisible4.value = true
        tan_type.value = 2
        pay_alid.value = item.id
        pay_al_type.value = 2
    }
}

const video_info = (val) => {
    document.getElementById('image_mse').style.display = 'none';
    document.getElementById('mse_video').style.display = 'block';

    player.value = new Player({
        id: 'mse_video',
        autoplay: true,
        fluid: true,
        url: val,
    })
}

const album_collection = (val) => {
    addFavorite({
        table_name:'album',
        object_id:val
    }).then(res => {
        if (res.code === 1) {
            is_collection.value = 1
        }else{
            is_collection.value = 2
        }
    })
}

const handleMouseEnter_video = (id) => {
    dialogFormVisible2.value = true
    video_id.value = id
}

const del_collection = (val) => {
    delFavorite({
        table_name:'album',
        object_id:val
    }).then(res => {
        if (res.code === 1) {
            is_collection.value = 2
        }else{
            is_collection.value = 1
        }
    })
}

const introduce = (val) => {
    document.getElementById('introduce').style.display = 'block';
    document.getElementById('directory').style.display = 'none';
    document.getElementById('comment').style.display = 'none';
    document.getElementById('jieshao').style.background = '#0D67BB';
    document.getElementById('mulu').style.background = '#0B3D6C';
    document.getElementById('pinglun').style.background = '#0B3D6C';
}
const directory = (val) => {
    document.getElementById('introduce').style.display = 'none';
    document.getElementById('directory').style.display = 'block';
    document.getElementById('comment').style.display = 'none';
    document.getElementById('jieshao').style.background = '#0B3D6C';
    document.getElementById('mulu').style.background = '#0D67BB';
    document.getElementById('pinglun').style.background = '#0B3D6C';
}
const comment1 = (val) => {
    document.getElementById('introduce').style.display = 'none';
    document.getElementById('directory').style.display = 'none';
    document.getElementById('comment').style.display = 'block';
    document.getElementById('jieshao').style.background = '#0B3D6C';
    document.getElementById('mulu').style.background = '#0B3D6C';
    document.getElementById('pinglun').style.background = '#0D67BB';
}

const deletePost = (item) => {
    delPost({
        category_type: item.category_type,
        id: item.id
    }).then(res => {
        if (res.code === 1) {
            ElMessage({message: res.msg, type: 'success'})
            getNewList('rem')
        }
    })
}
// 更新帖子
const updatePost = (item) => {
  emit('updateContent',item)
}

// 打开发布框
const openProp = () => {
  dialogFormVisible.value = true
}
const echoerror = (err) => {
}
const expand = (index, el) => {

  if (postContents.value[index].classList.contains('textinfo')) {
    postContents.value[index].classList.remove('textinfo')
    el.textContent = "收起";
  } else {
    postContents.value[index].classList.add('textinfo')
    el.textContent = "展开";
  }
}
const showTextInfo = async (index) => {
  await nextTick();
  let el = postContents.value[index]

  expandStates[index] = el.scrollHeight > el.offsetHeight
}
const getOpacity = (index) => {
  return index === 2 ? 0.2 : 1;
}
// 点击评论
const handleMouseEnter = (comment) => {
  comment.active = true
}

//删除评论
const deleteComment = (id) => {
  delComment({id: id}).then(res => {
    if (res.code === 1) {
      ElMessage({message: res.msg, type: 'success'})
      getNewList('rem')
    }
  })
}

// 关闭评论
const closeComment = (comment) => {
  comment.active = false
}

const inputframe = (comment) => {
  comment.inputframes = true
}

const closeframe = (comment) => {
  comment.inputframes = false
}

const getCategoryLists1 = () => {
  systemConfig().then(res => {
    channels_id = res.data.web_qa_community_channels_id
  })
}

const transport = (comment) => {
  inputtype.value = 4
  comment.transports = true
}

const closetransport = (comment) => {
  comment.transports = false
}

const sendMessageResult = (event) => {
  if (event) {
    getNewList('rem')
  }
}

// 获取评论
const getCommentList = (aid, pid, page, f, z, comment, top_pid) => {

  let type = ''
  if (props.typeView == 1) {
    type = 'bbs'
  } else if (props.typeView == 3) {
    type = 'bbs'
  } else if (props.typeView == 5) {
    type = 'news'
  }
  getComment({type, aid, pid, orderway: 'desc', page, limit: 5, top_pid})
      .then(res => {
        if (res.code === 1) {
          comment.page += 1
          res.data.list.forEach(item => {
            item.isOpen = false
            item.text = ''
          })
          if (!from.list[f].commentList[z].childernComment) {
            from.list[f].commentList[z].childernComment.push(...res.data.list)
          } else {
            res.data.list.forEach((child, ss) => {
              from.list[f].commentList[z].childernComment.forEach(item => {
                if (child.id == item.id) {
                  res.data.list.splice(ss, 1)
                }
              })
            })
            from.list[f].commentList[z].childernComment.push(...res.data.list)
          }
          if (from.list[f].commentList[z].childernComment.length === res.data.total) {
            from.list[f].commentList[z].isShow = false
          } else {
            from.list[f].commentList[z].isShow = true
          }
        }
      })
}
// 跳转详情
const jumpDetails = (item) => {
  const newObj = (({category_type, comment_type, id, table_name}) => ({
    category_type,
    comment_type,
    id,
    table_name
  }))(item);
  const content = toBase64(JSON.stringify(newObj))
  if (props.typeView == 1 || props.typeView == 3) {
    const routeUrl = router.resolve({
      path: "/home/forumDetails",
      query: {id: item.id, type: props.typeView, content: content}
    });
    window.open(routeUrl.href, "_blank");
  } else if (props.typeView == 5) {
    const routeUrl = router.resolve({
      path: "/home/newDetails",
      query: {id: item.id, type: props.typeView, content: content}
    });
    window.open(routeUrl.href, "_blank");
  }
}
// 父级评论打开图标
const beforeIcon = (index) => {
  from.index = index
}
// 子级评论打开图标
const beforeIconChild = (a, b) => {
  from.index = a
  from.indexChild = b
}
// 子级评论选择表情
const getIconChild = (e) => {
  from.list[from.index].commentList[from.indexChild].text += e
}
// 点赞
const Like = (id, status, item) => {
  let table_name = ''
  if (props.typeView == 1) {
    table_name = item.table_name
  } else if (props.typeView == 3) {
    table_name = item.table_name
  } else if (props.typeView == 5) {
    table_name = item.table_name
  }
  if (status == 1) {
    delLive({table_name, object_id: id})
        .then(res => {
          if (res.code === 1) {
            item.is_mylike = 0
            item.post_like -= 1
          }
        })
  } else {
    addLive({table_name, object_id: id})
        .then(res => {
          if (res.code === 1) {
            item.is_mylike = 1
            item.post_like += 1
          }
        })
  }
}
// 父级评论选择表情
const getIcon = (e) => {
  from.list[from.index].text += e
}
const getIcon1 = (e) => {
    comment.value += e
}
// 收藏
const collect = (id, status, item) => {
  let table_name = ''
  if (props.typeView == 1) {
    table_name = item.table_name
  } else if (props.typeView == 3) {
    table_name = item.table_name
  } else if (props.typeView == 5) {
    table_name = item.table_name
  }
  if (status == 1) {
    delFavorite({table_name, object_id: id})
        .then(res => {
          if (res.code === 1) {
            item.is_myfavorite = 0
          }
        })
  } else {
    addFavorite({table_name, object_id: id})
        .then(res => {
          if (res.code === 1) {
            item.is_myfavorite = 1
          }
        })
  }
}
// 子级发送评论
const sendChildComment = (obj, comment, top_pid) => {
  let type = ''
  if (props.typeView == 1) {
    type = 'bbs'
  } else if (props.typeView == 3) {
    type = 'bbs'
  } else if (props.typeView == 5) {
    type = 'news'
  }
  addComment({type, aid: obj.aid, pid: obj.id, content: obj.text, top_pid})
      .then(res => {
        if (res.code === 1) {
          obj.active = false
          obj.text = ''
          obj.isShow = true
          res.data.isOpen = false
          res.data.text = ''
          if (comment) {
            comment.childernComment.push(res.data)
          } else {
            obj.childernComment.push(res.data)
          }
        }
      })
}
// 父级发送评论
const sendCommentVal = (id, text, item) => {
  let type = ''
  if (props.typeView == 1) {
    type = item.comment_type
  } else if (props.typeView == 3) {
    type = 'bbs'
  } else if (props.typeView == 5) {
    type = 'news'
  }
  addComment({type, aid: id, pid: 0, content: text, top_pid: 0})
      .then(res => {
        if (res.code === 1) {
          item.text = ''
          res.data.isOpen = false
          res.data.text = false
          res.data.page = 1
          res.data.childernComment = []
          res.data.user.username = res.data.user.nickname
          item.commentList.push(res.data)
        }
      })
}

const sendCommentVal1 = (id, text) => {
    let type = 'album'
    addComment({type, aid: id, pid: 0, content: text, top_pid: 0})
        .then(res => {
            if (res.code === 1) {
                comment = ''
                res.data.isOpen = false
                res.data.text = false
                res.data.page = 1
                res.data.childernComment = []
                res.data.user.username = res.data.user.nickname

                getComment({
                    aid: id,
                    type: 'album',
                    limit: 10,
                    page: 1
                }).then(res => {
                    if(res.code === 1){
                        commentdata.value = res.data.list
                        commentnum.value = res.data.total
                        whichpage.value = res.data.current_page
                    }
                })
            }
        })
}

// 选择排序方式
const clickSort = (row) => {
  from.sortId = row.id
  from.sortName = row.name
  getNewList('rem')
}
// 选择日期
const clickDate = (i, id) => {
  from.dateType = id
  dateType.value.forEach((item, index) => {
    item.active = index === i
  })
  getNewList('rem')
}
// 关键字搜索
const getKeyword = (val) => {
  from.keyword = val
  getNewList3('rem')
}

const getNewList3 = (type) => {
  if (type === 'rem') {
    from.list = []
    from.page = 1
    noMore.value = false
  }
  if (noMore.value) return
  loading.value = true
  zhibotype.value = 1
    albumtype.value = 1
  searchList({
    page: from.page,
    limit: 20,
    keyword: from.keyword,
    time: props.create_time ? props.create_time : 0,
  }).then(res => {
    if (res.code === 1) {
      albumList.value = res.data.albumList
      investmentList.value = res.data.investmentList
      liveList.value = res.data.liveList
      // plateList.value = res.data.plateList
      videoList.value = res.data.videoList
      searchtype.value = 2


      let data = res.data.plateList
      const regex = new RegExp('img', 'gi')
      for (var i = 0; i < res.data.plateList.length; i++) {
        data[i].post_content = res.data.plateList[i].post_content
            .replaceAll(new RegExp('style="[^"]*"', 'gi'), '')
        data[i].post_content = res.data.plateList[i].post_content
            .replace(regex, `img style="max-width:200px;float: left;"`) // 加上自己所需要的样式
      }
      plateList.value = data


    }
  }).finally(() => {
    loading.value = false
  })
}

// 获取列表数据
const getNewList = (type) => {
  if (type === 'rem') {
    from.list = []
    from.page = 1
    noMore.value = false
  }
  if (noMore.value) return
  loading.value = true
  let category_type = ''
  if (props.typeView == 1) {
    category_type = 'plaza'
  } else if (props.typeView == 3) {
    category_type = 'plate'
  } else if (props.typeView == 5) {
    category_type = 'news'
  }
  plaza_post_index({
    category_id: props.channel,
    page: from.page,
    limit: 20,
    type: props.create_time ? '' : from.dateType,
    orderway: from.sortId,
    keyword: from.keyword,
    time: props.create_time ? props.create_time : 0,
    category_type
  }).then(res => {
    if (res.code === 1) {
      from.page += 1
      from.total = res.data.total
      // 首页广场
      if (props.typeView == 1) {
        if (res.data.platePostList.length > 0) {
          res.data.platePostList.forEach(item => {
            item.text = ''
            if (item.commentList.length > 0) {
              item.commentList.forEach(row => {
                row.isOpen = false
                row.text = ''
                row.page = 1
                row.childernComment = []
              })
            }
          })
          from.list = [...from.list, ...res.data.platePostList]
          if ((from.list && from.list.length === res.data.total) || (res.data.plazaList && res.data.plazaList.length === 0)) {
            noMore.value = true
          }
          let data = from.list
          const regex = new RegExp('img', 'gi')
          for (var i = 0; i < from.list.length; i++) {
            data[i].post_content = from.list[i].post_content
                .replaceAll(new RegExp('style="[^"]*"', 'gi'), '')
            data[i].post_content = from.list[i].post_content
                .replace(regex, `img style="max-width:200px;float: left;"`) // 加上自己所需要的样式
          }
          from.list = data
        }

        // 新闻资讯
      } else if (props.typeView == 5) {
        res.data.newsList.forEach(item => {
          item.text = ''
          if (item.commentList.length > 0) {
            item.commentList.forEach(row => {
              row.isOpen = false
              row.text = ''
              row.page = 1
              row.childernComment = []
            })
          }
        })
        from.list = [...from.list, ...res.data.newsList]
        if ((from.list.length === res.data.total) || res.data.newsList.length === 0) {
          noMore.value = true
        }
        // 债市论坛
      } else if (props.typeView == 3) {
        res.data.plateList.forEach(item => {
          item.text = ''
          if (item.commentList.length > 0) {
            item.commentList.forEach(row => {
              row.isOpen = false
              row.text = ''
              row.page = 1
              row.childernComment = []
            })
          }
        })
        from.list = [...from.list, ...res.data.plateList]
        if ((from.list.length === res.data.total) || res.data.plateList.length === 0) {
          noMore.value = true
        }
      }

    }
  }).finally(() => {
    loading.value = false
  })
  dialogFormVisible.value = false
}

const getNewList1 = (type) => {
  if (type === 'rem') {
    from.list = []
    from.page = 1
    from.time = ''
    noMore.value = false
  }
  if (noMore.value) return
  loading.value = true
  let category_type = ''
  if (props.typeView == 1) {
    category_type = 'plaza'
  } else if (props.typeView == 3) {
    category_type = 'plate'
  } else if (props.typeView == 5) {
    category_type = 'news'
  }
  getHomeList({
    category_id: props.channel,
    channels_id: 5,
    page: from.page,
    limit: 20,
    time: from.time,
    keyword: from.keyword,
    category_type: 'news',
  }).then(res => {
    if (res.code === 1) {
      from.page += 1
      from.total = res.data.total
      // 首页广场
      if (props.typeView == 1) {
        if (res.data.platePostList.length > 0) {
          res.data.platePostList.forEach(item => {
            item.text = ''
            if (item.commentList.length > 0) {
              item.commentList.forEach(row => {
                row.isOpen = false
                row.text = ''
                row.page = 1
                row.childernComment = []
              })
            }
          })
          from.list = [...from.list, ...res.data.platePostList]
          if ((from.list && from.list.length === res.data.total) || (res.data.plazaList && res.data.plazaList.length === 0)) {
            noMore.value = true
          }
        }

        // 新闻资讯
      } else if (props.typeView == 5) {
        res.data.newsList.forEach(item => {
          item.text = ''
          if (item.commentList.length > 0) {
            item.commentList.forEach(row => {
              row.isOpen = false
              row.text = ''
              row.page = 1
              row.childernComment = []
            })
          }
        })
        from.list = [...from.list, ...res.data.newsList]
        if ((from.list.length === res.data.total) || res.data.newsList.length === 0) {
          noMore.value = true
        }
        // 债市论坛
      } else if (props.typeView == 3) {
        res.data.plateList.forEach(item => {
          item.text = ''
          if (item.commentList.length > 0) {
            item.commentList.forEach(row => {
              row.isOpen = false
              row.text = ''
              row.page = 1
              row.childernComment = []
            })
          }
        })
        from.list = [...from.list, ...res.data.plateList]
        if ((from.list.length === res.data.total) || res.data.plateList.length === 0) {
          noMore.value = true
        }
      }
    }
  }).finally(() => {
    loading.value = false
  })
  dialogFormVisible.value = false
}

const getNewList2 = (type) => {
  if (type === 'rem') {
    from.list = []
    from.page = 1
    from.time = ''
    noMore.value = false
  }
  if (noMore.value) return
  loading.value = true
  let category_type = ''
  if (props.typeView == 1) {
    category_type = 'plaza'
  } else if (props.typeView == 3) {
    category_type = 'plate'
  } else if (props.typeView == 5) {
    category_type = 'news'
  }
  getHomeList({
    category_id: props.channel,
    channels_id: 3,
    page: from.page,
    limit: 20,
    time: from.time,
    keyword: from.keyword,
    category_type: 'plate',
  }).then(res => {
    if (res.code === 1) {
      from.page += 1
      from.total = res.data.total
      // 首页广场
      if (props.typeView == 1) {
        if (res.data.platePostList.length > 0) {
          res.data.platePostList.forEach(item => {
            item.text = ''
            if (item.commentList.length > 0) {
              item.commentList.forEach(row => {
                row.isOpen = false
                row.text = ''
                row.page = 1
                row.childernComment = []
              })
            }
          })
          from.list = [...from.list, ...res.data.platePostList]
          if ((from.list && from.list.length === res.data.total) || (res.data.plazaList && res.data.plazaList.length === 0)) {
            noMore.value = true
          }
        }

        // 新闻资讯
      } else if (props.typeView == 5) {
        res.data.newsList.forEach(item => {
          item.text = ''
          if (item.commentList.length > 0) {
            item.commentList.forEach(row => {
              row.isOpen = false
              row.text = ''
              row.page = 1
              row.childernComment = []
            })
          }
        })
        from.list = [...from.list, ...res.data.newsList]
        if ((from.list.length === res.data.total) || res.data.newsList.length === 0) {
          noMore.value = true
        }
        // 债市论坛
      } else if (props.typeView == 3) {
        res.data.plateList.forEach(item => {
          item.text = ''
          if (item.commentList.length > 0) {
            item.commentList.forEach(row => {
              row.isOpen = false
              row.text = ''
              row.page = 1
              row.childernComment = []
            })
          }
        })
        from.list = [...from.list, ...res.data.plateList]
        if ((from.list.length === res.data.total) || res.data.plateList.length === 0) {
          noMore.value = true
        }
      }
    }
  }).finally(() => {
    loading.value = false
  })
  dialogFormVisible.value = false
}

// 分享到QQ
const shareQQ = () => {
  var url = window.location.href;
  var encodedUrl = encodeURIComponent(url);
  var shareUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + encodedUrl;
  window.open(shareUrl);
}

// 分享到微博
const shareMicroBlog = () => {
  let message = String(location.href)
  var url = 'https://service.weibo.com/share/share.php?url=' + encodeURIComponent(message) + '&appkey=MrShi&title=测试标题&language=zh_cn'
  window.open(url)
  // count=表示是否显示当前页面被分享数量(1显示)(可选，允许为空)
  // &url=将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)
  // &appkey=用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)
  // &title=分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)
  // &pic=自定义图片地址，作为微博配图(可选，允许为空)
  // &ralateUid=转发时会@相关的微博账号(可选，允许为空)
  // &language=语言设置(zh_cn|zh_tw)(可选)
}

//分享到微信
const shareWeChat = () => {
  var url = window.location.href;
  var encodedUrl = encodeURIComponent(url);
  var qrcodeUrl = 'https://login.weixin.qq.com?url=' + encodedUrl;
  window.open(qrcodeUrl)
};

const scrollFn = (e) => {
  //可视区域
  let clientHeight = document.documentElement.clientHeight
  // 滚动文档高度
  let scrollHeight = document.body.scrollHeight
  // 已滚动的高度
  let scrollTop = parseInt(document.documentElement.scrollTop)
  if ((scrollTop + clientHeight) === scrollHeight) {
    if (!noMore.value) {
      getNewList()
    }
  }
}
const handleTextareaInput = (event) => {
  // Log changes when the textarea value changes
  if (event.target.value.includes('【') && event.target.value.includes('】')) {
  } else {
    event.target.value = '';
    inputtype.value = 3
  }
};
const imageContentResult = (e) => {
  let str = e.type;
  let obj = eval(str);
  for (let i = 0; i < obj.length; i++) {
    if (obj[i].category_type === e.item.category_type && obj[i].id === e.item.id) {
      obj[i].text = e.content
    }
  }
}
const imageContentResult1 = (e) => {
  let str = e.type;
  let obj = eval(str);
  for (let i = 0; i < obj.length; i++) {
    if (obj[i].category_type === e.item.category_type && obj[i].id === e.item.id) {
      obj[i].text = e.content
    }
  }
  from.list[from.index].text += e.content
}

const handleMktoHtml = (e) => {
  return marked(e)
}
// const handleHide = () => {
//   images.value = []
//   visible.value = false
// }
const handleClick = (e) => {
  if (e.target.tagName === 'IMG') {
    // 获取 img 标签的 src 属性
    images.value = [e.target.src]
    visible.value = true
  }
}

const setPostContentRef = (el, index) => {
  if (el) {
    // 确保数组大小与 items 一致
    postContents.value[index] = el;
  }
};
defineExpose({getNewList, getKeyword, getNewList1, getNewList2, getNewList3})

onMounted(() => {
  window.addEventListener("scroll", scrollFn)
  getCategoryLists1()
})

onUnmounted(() => {
  window.removeEventListener("scroll", scrollFn);
})

watchEffect(() => {
  // 每次 items 改变时，重新设置引用
  if (from.list.length > 0) {
    for (let i = 0; i < from.list.length; i++) {
      showTextInfo(i)
    }
  }
});
</script>
<style lang="scss">
.pltextarea::-webkit-scrollbar-track {
  background-color: transparent;
}
/* 自定义滚动条的滑块 */
.pltextarea::-webkit-scrollbar-thumb {
  background-color: transparent;
}

/* 自定义滚动条的宽度 */
.pltextarea::-webkit-scrollbar {
  width: 12px; /* 或您希望的任何宽度 */
}
/* Firefox 浏览器的滚动条样式 */
.pltextarea {
  scrollbar-width: thin; /* 或 'none' 或 'auto' */
  scrollbar-color: transparent transparent; /* 滑块颜色和轨道颜色 */
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 998;
}

.close {
  position: absolute;
  top: 10px;
  right: 10%;
  color: white;
  font-size: 45px;
  cursor: pointer;
}

.textinfo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-box img {
  width: 100px;
}

//.chatIcon_list_item_pj_item_pl {
//  margin-top: 6px;
//  cursor: auto;
//  width: 100%;
//  //padding: 0 16px;
//  box-sizing: border-box;
//  background: transparent;
//  //border: 1px solid #1784FC;
//  border-radius: 6px;
//  top: 30px;
//  //z-index: 9;
//  position: relative;
//}

.item_pl_content {
  width: 100%;
  position: relative;
  background: transparent;
}

.item_pl_content_textarea {
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  font-size: 9px;
  resize: none;
  padding: 10px 0;
  box-sizing: border-box;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.item_pl_user {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(216, 216, 216, 1);
  color: #000000;

  span {

    &:first-child {
      font-size: 10px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #1784FC;
    }

    &:last-child {
      cursor: pointer;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #000;
    }

  }
}

.item_pl_caozuo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  right: 5%;

  .item_pl_caozuo_img {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-right: 11px;
    cursor: pointer;
  }

  .item_pl_caozuo_btn {
    width: 42px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: linear-gradient(0deg, #085EAF, #2791F4);
    border-radius: 10px;
    font-size: 9px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    cursor: pointer;
  }

}
</style>
<style lang="scss" scoped>
.chatIcons {
  width: 100%;
  background: #02183F;
  border-radius: 16px;
  margin-top: 18px;
  padding: 18px;
  box-sizing: border-box;

  .info {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .chatIcon_head {
    width: 100%;
    height: 30px;
    position: sticky;
    z-index: 9;
    background: #02183F;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .chatIcon_head_left {
      display: flex;
      align-items: center;

      img {
        width: 16px;
        height: 10px;
        margin-right: 6px;
      }

      span {
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #00D5D8;
      }
    }

    .chatIcon_head_right {
      display: flex;
      align-items: center;

      span::v-deep {
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        align-items: center;

        .el-statistic {
          .el-statistic__content {
            display: flex;
            align-items: center;

            .el-statistic__number {
              font-size: 13px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }

      .chatIcon_head_right_btn {
        // width: 78px;
        height: 26px;
        padding: 8px;
        box-sizing: border-box;
        background: linear-gradient(0deg, #085EAF, #2791F4);
        border-radius: 4px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 16px;

        img {
          width: 11px;
          height: 11px;
          margin-right: 6px;
        }

        span {
          font-size: 11px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }
  }

  .chatIcon_operate {
    width: 100%;
    height: 30px;
    margin: 5px 0 17px 0;
    display: flex;
    align-items: center;
    position: sticky;
    background: #02183F;
    top: 30px;
    z-index: 9;

    .chatIcon_operate_w {
      width: 56px;
      height: 28px;
      font-size: 16px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      cursor: pointer;
    }

    .chatIcon_operate_cate {
      flex: 1;
      margin-left: 30px;
      display: flex;
      align-items: center;

      .active {
        background: linear-gradient(0deg, #085EAF, #2791F4) !important;
      }

      .chatIcon_operate_cate_item {
        width: 36px;
        height: 23px;
        line-height: 23px;
        text-align: center;
        background: #0B3D6C;
        border-radius: 3px;
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        margin-right: 9px;
        cursor: pointer;
      }
    }

    .layout_content_picture_item_head_sele {
      flex-shrink: 0;
      width: 98px;
      height: 23px;
      background: rgba(13, 46, 100, 0.6);
      border-radius: 3px;
      border: 1px solid rgba(119, 198, 253, 0.3);
      padding: 0 11px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      cursor: pointer;

      &:hover {
        .sele_menu {
          height: 90px;
        }
      }

      .sele_menu::-webkit-scrollbar {
        width: 5px;
      }

      .sele_menu::-webkit-scrollbar-thumb {
        border-radius: 8px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #5D6B82;
      }

      .sele_menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        overflow-y: scroll;
        border-radius: 5px;
        transition: .5s;
        z-index: 9;
        background-color: rgba(13, 46, 100, 0.6);

        .sele_menu_item {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;

          &:hover {
            background-color: rgba(2, 24, 63, 0.5);
          }
        }
      }

      span {
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
      }

      img {
        width: 13px;
        height: 7px;
      }
    }
  }

  .chatIcon_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
  }
}

.chatIcon_list_item {
  padding: 14px;
  background: rgba(13, 46, 100, 1);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  margin-bottom: 11px;
  cursor: pointer;

  &:last-child {
    margin-bottom: 0 !important;
  }

  .chatIcon_list_item_head {
    width: 100%;
    display: flex;
    align-items: center;

    img {
      width: 28px;
      height: 28px;
      margin-right: 10px;
    }

    .head_name {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FFFFFF;
      padding-right: 9px;
      margin-right: 9px;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
    }

    .head_time {
      font-size: 11px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
    }
  }

  .chatIcon_list_item_info::v-deep {
    width: 100%;
    margin-top: 10px;

    img {
      width: 100%;
    }

    video {
      width: 100%;
    }
  }

  .chatIcon_list_item_pj {
    width: 100%;
    margin-top: 10px;
    cursor: auto;

    .chatIcon_list_item_pj_item {
      width: 100%;
      padding: 8px 14px;
      box-sizing: border-box;
      background: #094074;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      margin-bottom: 9px;
      position: relative;

      &:last-child {
        margin-bottom: 0 !important;
      }

      .chatIcon_list_item_pj_item_pl {
        position: absolute;
        left: 0;
        cursor: auto;
        width: 100%;
        //padding: 0 16px;
        box-sizing: border-box;
        // height: 105px;
        background: transparent;
        //border: 1px solid #1784FC;
        border-radius: 6px;
        top: 30px;
        //z-index: 9;

        .item_pl_user {
          width: 100%;
          height: 30px;
          line-height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid rgba(216, 216, 216, 1);

          span {
            &:first-child {
              font-size: 10px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #1784FC;
            }

            &:last-child {
              cursor: pointer;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #000;
            }
          }
        }

        .item_pl_content {
          width: 100%;
          position: relative;
          background: transparent;

          textarea {
            width: 100%;
            height: 50px;
            border: none;
            outline: none;
            font-size: 9px;
            resize: none;
            padding: 10px 0;
            box-sizing: border-box;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
          }
        }

        .item_pl_caozuo {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-bottom: 8px;
          box-sizing: border-box;
          position: absolute;
          bottom: 5%;
          right: 5%;

          img {
            flex-shrink: 0;
            width: 13px;
            height: 13px;
            margin-right: 11px;
            cursor: pointer;
          }

          .item_pl_caozuo_btn {
            width: 42px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: linear-gradient(0deg, #085EAF, #2791F4);
            border-radius: 10px;
            font-size: 9px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            cursor: pointer;
          }
        }
      }

      .chatIcon_list_item_pj_item_top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .pj_item_top_user {
          display: flex;
          align-items: center;

          img {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            margin-right: 6px;
          }

          span {
            font-size: 9px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
          }
        }

        .pj_item_top_time {
          display: flex;
          align-items: center;

          .pj_item_top_time_a {
            display: flex;
            align-items: center;
            padding-right: 6px;
            margin-right: 6px;
            cursor: pointer;
            border-right: 2px solid rgba(255, 255, 255, 0.3);

            img {
              width: 9px;
              height: 8px;
              margin-right: 3px;
            }

            span {
              font-size: 9px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FCB407;
            }
          }

          .pj_item_top_time_b {
            font-size: 9px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
          }
        }
      }

      .chatIcon_list_item_pj_item_bottom {
        margin-top: 6px;

        span {
          font-size: 9px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 16px;

          &:first-child {
            color: #FFFFFF;
          }
        }
      }

      .chatIcon_list_item_pj_more {
        margin-top: 10px;
        font-size: 9px;
        color: #fff;
        cursor: pointer;
      }

      .chatIcon_list_item_pj_item_list {
        width: 100%;
        margin-top: 10px;
        padding-left: 20px;
        box-sizing: border-box;

        .chatIcon_list_item_pj_item_list_item {
          width: 100%;
          padding: 8px 0;
          box-sizing: border-box;
          background: #094074;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          margin-bottom: 5px;
          position: relative;

          &:last-child {
            margin-bottom: 0 !important;
          }

          .chatIcon_list_item_pj_item_pl {
            position: absolute;
            left: 0;
            cursor: auto;
            width: 100%;
            //padding: 0 16px;
            box-sizing: border-box;
            // height: 105px;
            background: transparent;
            //border: 1px solid #1784FC;
            border-radius: 6px;
            top: 30px;
            //z-index: 9;

            .item_pl_user {
              width: 100%;
              height: 30px;
              line-height: 30px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid rgba(216, 216, 216, 1);

              span {
                &:first-child {
                  font-size: 10px;
                  font-family: Source Han Sans CN;
                  font-weight: 500;
                  color: #1784FC;
                }

                &:last-child {
                  cursor: pointer;
                  font-size: 16px;
                  font-family: Source Han Sans CN;
                  font-weight: 500;
                  color: #000;
                }
              }
            }

            .item_pl_content {
              width: 100%;
              position: relative;
              background: transparent;

              textarea {
                width: 100%;
                height: 50px;
                border: none;
                outline: none;
                font-size: 9px;
                resize: none;
                padding: 10px 0;
                box-sizing: border-box;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
              }
            }

            .item_pl_caozuo {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding-bottom: 8px;
              box-sizing: border-box;
              position: absolute;
              bottom: 5%;
              right: 2%;
              img {
                flex-shrink: 0;
                width: 13px;
                height: 13px;
                margin-right: 11px;
                cursor: pointer;
              }

              .item_pl_caozuo_btn {
                width: 42px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background: linear-gradient(0deg, #085EAF, #2791F4);
                border-radius: 10px;
                font-size: 9px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                cursor: pointer;
              }
            }
          }

          .chatIcon_list_item_pj_item_top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .pj_item_top_user {
              display: flex;
              align-items: center;

              img {
                width: 17px;
                height: 17px;
                border-radius: 50%;
                margin-right: 6px;
              }

              span {
                font-size: 9px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }

            .pj_item_top_time {
              display: flex;
              align-items: center;

              .pj_item_top_time_a {
                display: flex;
                align-items: center;
                padding-right: 6px;
                margin-right: 6px;
                cursor: pointer;
                border-right: 2px solid rgba(255, 255, 255, 0.3);

                img {
                  width: 9px;
                  height: 8px;
                  margin-right: 3px;
                }

                span {
                  font-size: 9px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #FCB407;
                }
              }

              .pj_item_top_time_b {
                font-size: 9px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
          }

          .chatIcon_list_item_pj_item_bottom {
            margin-top: 6px;

            span {
              font-size: 9px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              line-height: 16px;

              &:first-child {
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
  }

  .chatIcon_list_item_footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    cursor: auto;

    .chatIcon_list_item_footer_left {
      flex: 1;
      display: flex;
      align-items: center;

      .chatIcon_list_item_footer_left_item {
        flex: 1;
        display: flex;
        cursor: pointer;

        img {
          width: 15px;
          height: 14px;
          margin-right: 4px;
        }

        span {
          font-size: 11px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }

    .chatIcon_list_item_footer_right {
      width: 195px;
      height: 23px;
      padding: 0 1px 0 13px;
      box-sizing: border-box;
      background: #EAF5FF;
      border-radius: 11px;
      margin-left: 21px;
      flex-shrink: 0;
      display: flex;
      align-items: center;

      .inputText {
        flex: 1;
        height: 100%;

        input::-webkit-input-placeholder {
          font-size: 9px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #0361BA;
        }

        input {
          font-size: 9px;
          color: #222222;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0);
          border: none;
          outline: none;
        }
      }

      .caozuo {
        flex-shrink: 0;
        display: flex;
        align-items: center;

        img {
          width: 13px;
          height: 13px;
          margin-right: 8px;
          cursor: pointer;
        }

        .caozuo_btn {
          width: 42px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background: linear-gradient(0deg, #085EAF, #2791F4);
          border-radius: 10px;
          font-size: 9px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #FFFFFF;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
